<template>
  <div class="user_bxo">
    <!-- 面包屑 -->
    <MBX level1="权限管理" level2="角色列表"></MBX>

    <!-- 卡片 -->
    <el-card class="mt16">
      <el-row :gutter="20">
        <!-- 添加按钮 -->
        <el-col :span="6">
          <el-button type="primary" @click="rolesBtn">添加角色</el-button>
        </el-col>
      </el-row>

      <!-- 表格 -->
      <el-table
        :data="roles"
        class="mt16"
        border
        style="width: 100%"
      >
         <el-table-column type="expand" width="100px">
          <template slot-scope="scope">
            <div class="role_box">
              <div v-if="scope.row.children.length > 0">
                <el-row
                  class="row_box"
                  v-for="item1 in scope.row.children"
                  :key="item1.id"
                >
                  <!-- 第一列 -->
                  <el-col :span="4">
                    <el-tag
                      closable
                      @close="
                        deleteRoleRights(scope.row, scope.row.id, item1.id)
                      "
                      type="primary"
                      >{{ item1.authName }}</el-tag
                    >
                  </el-col>

                  <!-- 第二列 -->
                  <el-col :span="20">
                    <el-row v-for="item2 in item1.children" :key="item2.id">
                      <el-col :span="6">
                        <el-tag
                          type="success"
                          @close="
                            deleteRoleRights(scope.row, scope.row.id, item2.id)
                          "
                          closable
                          >{{ item2.authName }}</el-tag
                        >
                      </el-col>
                      <el-col :span="18">
                        <el-tag
                          type="warning"
                          closable
                          @close="
                            deleteRoleRights(scope.row, scope.row.id, item3.id)
                          "
                          v-for="item3 in item2.children"
                          :key="item3.id"
                          >{{ item3.authName }}</el-tag
                        >
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </div>
              <div v-else>此角色暂无权限哦</div>
            </div>
          </template>
        </el-table-column>
        
        </el-table-column>
        <el-table-column type="index" label="#"> </el-table-column>
        <el-table-column prop="roleName" label="角色名称"></el-table-column>
        <el-table-column prop="roleDesc" label="角色描述"> </el-table-column>
        <!-- 操作 -->
        <el-table-column prop="" label="操作" width="250px">
          <template slot-scope="scope">
            <div>
              <!-- 编辑   -->
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
                @click="edit(scope.row)"
              ></el-button>
              <!-- 删除  -->
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="del(scope.row)"
              ></el-button>
              <!-- 分配角色  -->
              <el-button
                size="mini"
                type="warning"
                icon="el-icon-setting"
                @click="SetRole(scope.row)"
              ></el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- -- 添加用户对话框 弹出框  -->
    <el-dialog title="添加角色" :visible.sync="isSetRole">
      <el-form
        title="添加用户"
        ref="rolesForm"
        label-width="100px"
        :model="rolesData"
        :rules="rules"
      >
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="rolesData.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="rolesData.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isSetRole = false">取 消</el-button>
        <el-button type="primary" @click="rolesBtnOk(rolesData)"
          >确 定</el-button
        >
      </span>
    </el-dialog>

    <!-- 【编辑】 用户对话框 弹出框 -->
    <el-dialog title="编辑用户" :visible.sync="editSetRole">
      <el-form
        title="编辑用户"
        :rules="rules"
        ref="editForm"
        :model="rolesData"
      >
        <el-form-item label="角色名称" prop="roleName">
          <el-input
            v-model="rolesData.roleName"
            disabled
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="rolesData.roleDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editSetRole = false">取 消</el-button>
        <el-button type="primary" @click="editUserOk">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 【分配】 用户对话框 弹出框   :rules="rules"-->
    <el-dialog title="分配权限" :visible.sync="rightsFlag">
      <el-tree
        :data="rightData"
        show-checkbox
        node-key="id"
        :default-checked-keys="defaultcheckedkeys"
        default-expand-all
        :props="defaultProps"
        ref="treRef"
      >
      </el-tree>

      <span slot="footer" class="dialog-footer">
        <el-button @click="rightsFlag = false">取 消</el-button>
        <el-button type="primary" @click="rightsOk">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  rolesApi,
  rolesDelApi,
  rolesEsitApi,
  rolesAddApi,
} from "../../../http/api";
export default {
  data() {
    return {
      roleId: "",
      rightData: [],
      // rightsForm: {},
      defaultcheckedkeys: [],
      rightsFlag: false,
      isSetRole: false, //弹出框状态
      editSetRole: false, // 编辑弹出框状态
      //   用户信息
      rolesData: {
        roleName: "",
        roleDesc: "",
      },
      rolesList: [], // 角色列表数据
      roles: [],
      // 添加用户校验
      rules: {
        roleName: [
          { required: true, message: "请输入角色名称", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "输入的用户长度必须5~20之间",
            trigger: "blur",
          },
        ],

        roleDesc: [
          { required: true, message: "请输入角色描述", trigger: "blur" },
          {
            min: 2,
            max: 15,
            message: "长度在 5 到 15 个字符",
            trigger: "blur",
          },
        ],
      },
      defaultProps: {
        children: "children",
        label: "authName",
        id: "id",
      },
    };
  },
  methods: {

// 删除指定权限
  async deleteRoleRights(row, roleid, rightid) {
      //调接口删除
      const res = await this.$API.rightsDelApi({roleid, rightid})
      // console.log('删除后的权限：', res)

      row.children = res
      //刷新角色列表
      // this.getRoleList()
    },

    // 闭包函数
    mingzi(row, arr) {
      if (!row.children) {
        return arr.push(row.id);
        // return false;
      }
      row.children.forEach((item) => {
        this.mingzi(item, arr);
      });
    },
    // 管理权限 弹窗 确定
    async rightsOk() {
      const str = [
        ...this.$refs.treRef.getHalfCheckedKeys(),
        ...this.$refs.treRef.getCheckedKeys(),
      ].join(",");
      const res = await this.$API.rightsApi({ roleId: this.roleId, rids: str });
      // console.log(res);
      // console.log(this.roleId);
      // console.log(str);
      this.rightsFlag = false;
      this.rolesListData();
    },
    // 点击出现一个 管理权限 弹窗
    async SetRole(row) {
      this.rightsFlag = true;
      this.roleId = row.id;
      const res = await this.$API.rightsListApi("tree");
      this.rightData = res;
      this.mingzi(row, this.defaultcheckedkeys);
      // console.log(res);
    },
    //   点击编辑按钮，弹出弹出框
    edit(row) {
      // console.log("编辑的这一行数据：", row);
      this.rolesData = row;
      this.editSetRole = true;
    },
    // 点击编辑的确定按钮
    editUserOk() {
      // console.log("111111");
      this.$refs.editForm.validate(async (vaild) => {
        if (!vaild) return false;
        const { id, roleName, roleDesc } = this.rolesData;
        const res = await rolesEsitApi(id, { roleDesc, roleName });
        this.editSetRole = false;
        this.rolesListData();
      });
      this.editBox = false;
    },

    // 点击删除，出现弹出框
    del(val) {
      //   console.log("要删除的那一行：", val.id);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await rolesDelApi(Number(val.id));
          this.rolesListData();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 添加角色按钮
    rolesBtn() {
      this.rolesData = {};
      //   console.log("点击了添加按钮");
      this.isSetRole = true;
    },

    // 点击添加的确定按钮，添加进去
    rolesBtnOk() {
      this.$refs.rolesForm.validate(async (valid) => {
        if (!valid) return false;
        const res = await rolesAddApi(this.rolesData);
        // console.log("添加的用户数据:", res);
        this.isSetRole = false;
        this.rolesListData();
      });
    },
    // 请求角色列表数据
    async rolesListData() {
      const res = await rolesApi(this.rolesData);
      const roles = res;
      this.roles = roles;
      //   console.log("角色列表数据:", this.roles);
    },
  },
  created() {
    this.rolesListData();
  },
};
</script>

<style lang="scss" scoped>
.el-tag{
  margin: 6px 10px;
}
</style>
